//为了引进JS文件不引起网页的阻塞、卡顿
window.onload = function(){
    //生成所需要的li
    (function(){
        var len = 5 * 5 * 5;//确定生成li的总数;这样写是因为方便改，不用计算好了改。

        //所有的li要加载到ul里面的，所以要先获取li的父级ul
        oUl = document.getElementById('list').children[0];
        //获取动态的li，方便后面加li能直接加进去
        aLi = oUl.children;

        //初始化
        (function(){

            //循环创建len个li
            for(var i = 0;i < len;i++){
                //创建li
                var oLi = document.createElement('li');
                //给每一个li添加相关的属性值
                oLi.index = i;
                oLi.x = i % 5;
                oLi.y = Math.floor(i % 25 / 5);
                oLi.z = 4 - Math.floor(i / 25);

                //获取数据
                var data = flyData[i] || flyData[0];

                

                //添加li的内容
                oLi.innerHTML = "<b class='liCover'></b>"+
                    "<p class='liTitle'>"+data.type+"</p>"+
                    "<p class='liAuthor'>"+data.author+"</p>"+
                    "<p class='liTime'>"+data.time+"</p>";

                //定义li 在3D空间的随即位置
                var tX = Math.random()*6000 - 3000,
                    tY = Math.random()*6000 - 3000,
                    tZ = Math.random()*6000 - 3000;

                //设置li的初始值
                oLi.style.transform = "translate3D("+tX+"px,"+tY+"px,"+tZ+"px)";
                
                oUl.appendChild(oLi);
            }
            setTimeout(Grid,20)
        })();

        //关于弹窗
        (function(){
            //获取元素
            var oAlert = document.getElementById('alert'),
            aATitle = oAlert.getElementsByClassName('title')[0].getElementsByTagName('span')[0],
            oAImg = oAlert.getElementsByClassName('img')[0].getElementsByTagName('img')[0],
            oAAuthor = oAlert.getElementsByClassName('author')[0].getElementsByTagName('span')[0],
            oAInfo = oAlert.getElementsByClassName('info')[0].getElementsByTagName('span')[0];
            
            //获取点击弹出层需要的使用元素
            var oAll = document.getElementById('all'),
                oFrame = document.getElementById('frame'),
                oBack = document.getElementById('back');
            
            //通过时间委托给每一个li添加点击事件
            oUl.onclick = function(e){
                //获取点击事件的事件源
                var target = e.target;
                if(target.nodeName == 'B'){
                    //判断alert的display状态来确定是显示还是隐藏
                    if(oAlert.style.display == 'block'){
                        //已经确定oAlert是显示状态,我们希望隐藏
                        hide();
                    }else{
                        //已经确定oAlert是隐藏状态，我们希望显示


                        //获取被点击的li的index的索引值
                        var index = target.parentNode.index;
                        //通过index获取对应的数据内容
                        var data = flyData[index] || flyData[0];
                        

                        oAlert.index = index;

                        //修改弹窗内容
                        aATitle.innerHTML = '课题:'+data.title;
                        oAImg.src = 'src/'+data.src+'/index.png';
                        oAAuthor.innerHTML = '主讲老师:'+data.author;
                        oAInfo.innerHTML = '描述信息:'+data.dec;
                        Show();
                    }
                }
                
            }
           
            //点击弹出显示
            function Show(){
                if(!oAlert.timer){
                    oAlert.timer = true;
                    oAlert.style.display = 'block';
                //设置弹窗的初始位置
                oAlert.style.transform = 'rotateY(0deg) scale(2)';
                oAlert.style.opacity = '0';
                    //定义运动的参数
                    var time = 300,
                        sTime = new Date();

            //运动函数，让oAlert从放大2倍的大小移动到正常大小
            function m(){
                var prop = (new Date() - sTime) / time;
            
                if(prop >= 1){
                    prop = 1;
                    oAlert.timer = false;
                }else{
                    requestAnimationFrame(m);
                }
            
                oAlert.style.transform = 'rotateY(0deg) scale('+(2-prop)+')';
                oAlert.style.opacity = prop;
            
            }
                requestAnimationFrame(m);
                }
                
            }
            // 弹出隐藏
            function hide() {
              if (oAlert.style.display == 'block' && !oAlert.timer) {
                oAlert.timer = true;

                // 初始弹出隐藏的样式
                oAlert.style.display = 'block';
                oAlert.style.transform = 'rotateY(0deg) scale(1)';
                oAlert.style.opacity = '1';
              }
          
              // 定义运动的参数
              var time = 300,
                sTime = new Date();
          
              // 运动函数,让OAlert从放大0倍的大小移动到消失
              function m() {
                var prop = (new Date() - sTime) / time;

                if (prop >= 1) {
                  prop = 1;
                  oAlert.timer = false;
                  oAlert.style.display = 'none';
                } else {
                  requestAnimationFrame(m);
                }
            
                oAlert.style.transform = 'rotateY(' + prop * 180 + 'deg) scale(' + (1 - prop) + ')';
                oAlert.style.opacity = 1 - prop;
              }
              requestAnimationFrame(m);
          
            }
           
        })();

        //拖拽和滚轮事件
        (function(){
            var  roX = 0,
                 roY = 0,
                 trZ = -2000;
            
            //清除鼠标选中的文字
            document.onselectstart = function(){
                return false;
            }

            //鼠标按下事件
            document.onmousedown = function(e){

                //当前鼠标按下的x，y值
                var sX = e.clientX,//鼠标点击时x坐标
                    sY = e.clientY,//鼠标点击时y坐标
                    lastX = sX,//用来记录鼠标移动最后一次x值
                    lastY = sY,//用来记录鼠标移动最后一次y值
                    x_ = 0,//存鼠标抬起时最后两点的x差值
                    y_ = 0,//存鼠标抬起时最后两点的y差值
                    moveTime = 0;//用来解决最后一次move的时间

                //鼠标移动
                this.onmousemove = function(e){

                    //计算鼠标移动的距离
                    x_ = e.clientX - lastX;
                    y_ = e.clientY - lastY;

                    //通过你鼠标移动的距离来计算旋转度数
                    roX -= y_ * 0.15,
                    roY += x_ * 0.15,

                    oUl.style.transform = "translateZ("+trZ+"px) rotateX("+roX+"deg) rotateY("+roY+"deg)";

                    //重新赋值
                    lastX = e.clientX;
                    lastY = e.clientY;

                    //获取每次鼠标移动后的时间
                    moveTime = new Date();
                }
                //鼠标抬起事件
                this.onmouseup = function(){
                    //清除鼠标移动事件
                    this.onmousemove = null;

                    //计算缓冲
                    function m(){
                        //通过系数计算，慢慢减少移动距离
                        x_ *= 0.9;
                        y_ *= 0.9;

                        //通过距离来计算旋转角度值
                        roX -= y_ * 0.15,
                        roY += x_ * 0.15,

                        //旋转ul
                        oUl.style.transform = "translateZ("+trZ+"px) rotateX("+roX+"deg) rotateY("+roY+"deg)";

                        //清除缓冲
                        if(Math.abs(x_) < 0.1 && Math.abs(y_) < 0.1) return;
                        requestAnimationFrame(m);
                    }
                    if(new Date() - moveTime < 100){
                        requestAnimationFrame(m);
                    }
                }
            }

            //滚轮滚动改变Z轴事件
            !function(fn){
                //滚轮兼容
                if(document.onmousewheel === undefined){
                    //这里是火狐浏览器执行
                    document.addEventListener('DOMMouseSroll',function(){
                        var d = - e.detail / 3;
                        fn(d);
                    },false)
                }else{
                    //这里是主流浏览器
                    document.onmousewheel = function(e){
                        var d = e.wheelDelta / 120;
                        fn(d);
                    }
                }
            }(function(d){
                trZ += d * 100;
                //缩放ul
                oUl.style.transform = "translateZ("+trZ+"px) rotateX("+roX+"deg) rotateY("+roY+"deg)";

            })

        })();


        //Grid
        function Grid(){
            var disX = 350,//每个li水平（x）方向的间距
                disY = 350,//每个li垂直（y）方向的间距
                disZ = 350;//每个li纵深（z）方向的间距
            //for循环每个li，计算每个li的x，y，z的值
            for(var i = 0,len = aLi.length;i <len;i++){
                var oLi = aLi[i];
                var x = (oLi.x - 2) * disX,
                    y = (oLi.y - 2) * disY,
                    z = (oLi.z - 2) * disZ;
                oLi.style.transform = "translate3D("+x+"px,"+y+"px,"+z+"px)";
            }
        }
    })()

}